import {
    Row, Col, Form, Input,
    Checkbox, Button, Card,
    Avatar,
} from 'antd'

import { UserOutlined } from '@ant-design/icons'
import { useCallback } from 'react'
import { useNavigate } from 'react-router-dom'
import './style.css'

export default function Login() {
    const navigate = useNavigate()

    const onFinish = useCallback((v) => { 
        console.log(v);
        navigate('/');
    }, [navigate])
    const onFinishFailed = useCallback((v) => { 
        console.log(v);
    }, [])
    return (
        <Row justify={'center'} className='login-wrapper'>
            <Col md={{ span: 8 }} xm={{ span: 12 }}>
                <Row justify='center' id='login-logo-wrapper'>
                    <Avatar
                        size={{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }}
                        icon={<UserOutlined />}
                    />
                </Row>
                <Card title={<div className="login-card-title">后台管理系统</div>}>
                    <Form
                        name="basic"
                        labelCol={{
                            span: 5,
                        }}
                        wrapperCol={{
                            span: 19,
                        }}
                        style={{
                            maxWidth: 600,
                        }}
                        initialValues={{
                            remember: true,
                        }}
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}
                        autoComplete="off">
                        <Form.Item
                            label="用户名"
                            name="username"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your username!',
                                },
                            ]}>
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="密码"
                            name="password"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your password!',
                                },
                            ]}>
                            <Input.Password />
                        </Form.Item>

                        <Form.Item name="remember" valuePropName="checked" label={null}>
                            <Checkbox>Remember me</Checkbox>
                        </Form.Item>
                        <Button type="primary" htmlType="submit" style={{ margin: '8px auto', display: 'block', width: '20vw' }}>
                            登录
                        </Button>
                    </Form>
                </Card>
            </Col>
        </Row>
    )
}
